<template>
  <div>
    <nav-header></nav-header>
    <div class="main">
      <el-tabs :stretch="true"
               v-model="activeShop"
               type="card"
               @tab-click="changeCity">
        <el-tab-pane v-for="(item,index) in city"
                     :key="index"
                     :label="item"
                     :name="index+''">
          <div class="littleTab"
               v-for="(item, key) in shopList"
               :key="key">
            <div class="center"
                 style="margin-left: 10px;">
              <h2>{{ item.pharmacyName }}</h2>
              <p>店铺评分：{{item.pharmacyScore}}

              </p>
              <p>经营许可证：{{ item.pharmacyPermit }}</p>
              <p>商家地址：{{ item.pharmacyPlace }}</p>
              <p>营业时间：{{ item.pharmacyTimebeg }} -- {{item.pharmacyTimeend}}</p>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="pagination">
        <el-pagination @current-change="changePage"
                       background
                       :current-page="page"
                       :page-size="pageSize"
                       layout="total, prev, pager, next, jumper"
                       :total="total"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import navHeader from 'components/navHeader.vue'
import { request } from 'network/request.js'

export default {
  components: { navHeader },
  data() {
    return {
      activeShop: 0,
      shopList: [],
      page: 1,
      pageSize: 9,
      total: 0,
      city: ['热点药店推荐', '北京', '广东', '上海', '其他'],
      cityIndex: '0',
    }
  },

  created() {
    this.getShopList(0)
  },

  methods: {
    changeCity(tab) {
      this.page = 1
      this.cityIndex = tab.index
      this.getShopList(this.cityIndex)
    },

    changePage(val) {
      this.page = val
      this.getShopList(this.cityIndex)
      window.scrollTo(0, 0)
    },

    async getShopList(cityIndex) {
      const params = { page: this.page, pageSize: this.pageSize, cityIndex }
      const { data, count } = await request({
        url: '/pharmacy',
        params,
      })
      this.shopList = data
      this.total = count
    },
  },
}
</script>

<style lang="less" scoped>
.main {
  height: 1000px;
  width: 80%;
  margin: 20px auto;
  .el-tab-pane {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .littleTab {
      width: 30%;
      height: 250px;
      margin-bottom: 30px;
      background-color: #f5f5f5;
      .center > p {
        height: 30px;
      }
    }
  }
}
</style>